<template>
	<div class="content">
		<div class="flex borderea box-align-center" style="height: 50px">
			<div class="title flex-1">标准复审概览</div>
			<div class="flex">
				<!-- <div v-if="bzactivetype > 0" class="tabbj flex box-align-center">
					<span v-for="(value, index) in bzyearlist" :key="index" :class="{ active: bzactiveyear === index }" @click="bzyearchange(index, value)">{{
						value
					}}</span>
				</div> -->

				<div class="tabbj ml10 flex box-align-center">
					<span v-for="(value, index) in typelist" :key="index" :class="{ active: bzactivetype === index }" @click="bztypechange(index)">{{
						value
					}}</span>
				</div>
			</div>
		</div>

		<!-- 图表 -->
		<div v-if="bzactivetype === 0" class="parent mt10 flex flex-align-center">
			<div ref="chartRefzhu" style="width: 100%; height: 100%"></div>
		</div>

		<!-- 表格 -->
		<div v-if="bzactivetype === 1" class="parent1 mt10">
			<DynamicTable :x-legend="bzgltablelegendx" :y-legend="bzgltablelegendy" :values="bzgltablevalues" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { min } from 'xe-utils'
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
import { overviewEachYearStandardReviewApi, overviewStandardReviewApi } from '@/api/statistica'
const bzactivetype = ref(0)
const bzactiveyear = ref(0)
const typelist = ref(['图表', '表格'])
const currentYear = moment().year()
const bzyearlist = Array.from({ length: 4 }, (_, index) => currentYear - index)

const chartRefzhu = ref(null)
let chartInstancebzhu: echarts.ECharts | null = null

// 示例数据
const bzglchartsdata = {
	categories: [],
	series: []
}
const bzgltablevalues = ref([])
const bzgltablelegendx = ref([])
const bzgltablelegendy = ref([])
const biaozhunform = ref({
	abolishedStandards: '',
	currentStandards: '',
	draftingStandards: '',
	newDraftingStandards: '',
	revisingDraftingStandards: ''
})
const zhudatainfo = ref(null)
// 初始化图表
const initChart = () => {
	if (!chartRefzhu.value) {
		return
	}

	chartInstancebzhu = echarts.init(chartRefzhu.value)

	const option = {
		title: {
			text: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'shadow' },
			formatter: params => {
				const year = params[0].axisValue
				const yearData = zhudatainfo.value.values.find(item => item.category === year)
				return params
					.map(param => {
						const index = zhudatainfo.value.legends.indexOf(param.seriesName)
						return `${param.seriesName}: ${yearData.value[index]}`
					})
					.join('<br/>')
			}
		},
		legend: {
			data: zhudatainfo.value.legends,
			top: 'top',
			icon: 'horizontalLine', // 自定义横线图标
			itemHeight: 2, // 横线高度
			itemWidth: 15 // 横线宽度
		},
		xAxis: {
			type: 'category',
			data: zhudatainfo.value.values.map(item => item.category)
		},
		yAxis: {
			type: 'value'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '1%',
			top: '20%',
			containLabel: true
		},
		series: zhudatainfo.value.legends.map((legend, index) => ({
			name: legend,
			type: 'bar',
			barWidth: '15%',
			data: zhudatainfo.value.values.map(item => item.value[index]),
			itemStyle: {
				color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#9A60B4', '#FF9F7F'][index]
			}
		}))
	}
	chartInstancebzhu.clear()
	chartInstancebzhu.setOption(option)
}

// 响应式调整图表大小
const resizeChart = () => {
	chartInstancebzhu?.resize()
}

onMounted(() => {
	window.addEventListener('resize', resizeChart)
	overviewStandardReviewApi().then(res => {
		zhudatainfo.value = res.data
		console.log(zhudatainfo.value)
	})
	setTimeout(() => {
		nextTick(() => {
			initChart()
		})
	}, 800)
})

// 转换函数
const transformToSeries = (legends, values) => {
	return legends.map((legend, legendIndex) => ({
		name: legend,
		data: values.map(item => item.value[legendIndex])
	}))
}
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)
	chartInstancebzhu?.dispose()
})

const bzyearchange = (index: number, val: any) => {
	bzactiveyear.value = index
	window.removeEventListener('resize', resizeChart)
	chartInstancebzhu?.dispose()
	if (bzactivetype.value === 0) {
		overviewStandardReviewApi().then(res => {
			zhudatainfo.value = res.data
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		overviewEachYearStandardReviewApi(val).then(res => {
			bzgltablelegendx.value = res.data.xlegend
			bzgltablelegendy.value = res.data.ylegend
			bzgltablevalues.value = res.data.values
		})
	}
}
const bztypechange = (index: number) => {
	bzactivetype.value = index
	window.removeEventListener('resize', resizeChart)
	chartInstancebzhu?.dispose()
	if (index === 0) {
		chartInstancebzhu?.resize()
		overviewStandardReviewApi().then(res => {
			zhudatainfo.value = res.data
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		overviewEachYearStandardReviewApi(bzyearlist[bzactiveyear.value]).then(res => {
			bzgltablelegendx.value = res.data.xlegend
			bzgltablelegendy.value = res.data.ylegend
			bzgltablevalues.value = res.data.values
		})
	}
}
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.parent1 {
	overflow-x: auto;

	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */

	&::-webkit-scrollbar {
		display: none;
	}
}

.tabbj {
	background-color: #f5f6fa;

	border-radius: 3px;
	color: #333;
	padding: 4px 0px;

	span {
		padding: 3px 5px;
		border-radius: 3px;
		margin: 0 3px;

		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加过渡动画 */
	}

	.active {
		background-color: #fff;

		/*transform: translateY(-3px);*/
		color: #1491ff;
		/* 轻微上浮效果 */

		/* 阴影动画 */
	}
}

.paddingbottom10 {
	padding-bottom: 10px;
}

.borderea {
	border-bottom: solid 1px #ebeef5;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */
}

.child {
	flex: 0 1 calc(50% - 10px);
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	padding: 15px 10px;
	background: #fafafc;
	border-radius: 5px;
	display: flex;

	align-items: center;
}

.parenttitle {
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

.parennumber {
	font-size: 12px;

	color: #333;

	span {
		font-size: 15px;
		font-weight: 600;
	}
}

/* font-family: Arial, sans-serif; */
</style>
